<script type="text/javascript">
var currentSortObj="";
var paginationTotal = 1;//记录总数
$(document).ready(function() {
 	initData(0);
	$('#billDateFrom,#billDateTo').datepicker({
			changeMonth: true,
			changeYear: true,			 
			dateFormat: 'yy-mm-dd'
	});	
	
	$(".sort").live("click",function(){
		loading();
		if($(this).attr("sortMethod") == "asc"){
			$(this).attr("sortMethod","desc"); 
		}else{
			$(this).attr("sortMethod","asc"); 
		}
		currentSortObj = {'sortColumn':$(this).attr("sortColumn"),
						  'sortMethod':$(this).attr("sortMethod")};
		loadData(paginationCurrentPage,paginationPageSize,currentSortObj);
		closeLoading();
	});
	
});

function OpenUsageDiv(id){
    openIframeDialog('/merchant/plan/plan-usage-detail/id/' + id, 650, 450);
}

function inquire(){
 initData(0);
	 
}
 
function loadData(page,pageSize,sortObj){
	var billDateFrom = $('[name=billDateFrom]').val();
	var billDateTo = $('[name=billDateTo]').val();
	if(typeof sortObj == "undefined"){
		sortObj = currentSortObj;
	}
	 
	 $.ajax({ //这里使用到Jquery的ajax方法
	  type: "POST",
	  async: false,
	  dataType: "json",
	  url: "/merchant/plan/plan-usage-list", //请求的处理url
	  data:{
			'page':page,'pageSize':pageSize,			
			'startTime':billDateFrom,'endTime':billDateTo,
			'sortColumn':sortObj.sortColumn,
			'sortMethod':sortObj.sortMethod
			}, 
	  success: function(json) { 
	   
		 if(json.ask=="Success"){	
			paginationTotal = 	json.count;	
			var html= '';
			$.each(json.data,function(key,val){
			
				if((key+1)%2 ==1) {
					html += '<div class="line1">';
				}else{
					html += '<div class="line2">';
				}
				html += '<div title="'+val.billing_date+'" class="billCol1 cell">'+val.billing_date+'</div>';
				html += '<div title="'+val.expired+'" class="billCol2 cell">'+val.expired+'</div>';
				html += '<div title="'+val.item_qty+'" class="billCol3 cell">'+(parseInt(val.item_used)+parseInt(val.item_add_qty))+'/'+val.item_qty+'</div>';
				html += '<div title="'+val.sku_qty+'" class="billCol4 cell">'+(parseInt(val.sku_used)+parseInt(val.sku_add_qty))+'/'+val.sku_qty+'</div>';
				html += '<div title="'+val.pallet_qty+'" class="billCol5 cell">'+(parseInt(val.pallet_used)+parseInt(val.pallet_add_qty))+'/'+val.pallet_qty+'</div>';
				html += '<div title="'+val.total+' '+val.currency_code+'" class="billCol6 cell">'+val.total+' '+val.currency_code+'</div>';				
				html += '<div class="billCol7 cell">';
					html += '<img src="/images/icon_view.gif" title="Detail" onclick="OpenUsageDiv('+val.pu_id+')" style="cursor:pointer;" />';
				html += '</div>';
				html += '</div>'; 			
			});
		 
		 }else{
			html ='<div  class="billCol0">No Result</div>'
			 
		 }
		 $(".billData").html(html);
	  }
	}); 
}
	
</script> 
 
<style type="text/css">
 
.billCol1 {
    float: left;
    line-height: 25px;     
    width: 15%;
}
.billCol2 {
    float: left;
    line-height: 25px;     
    width: 15%;
}
.billCol3 {
    float: left;
    line-height: 25px;
    width: 12%;
}
.billCol4 {
    float: left;
    line-height: 25px;
    width: 13%;
}
.billCol5 {
    float: left;
    line-height: 25px;
    width: 13%;
}

.billCol6 {
    float: left;
    line-height: 25px;
    width: 20%;
}
.billCol7 {
    float: left;
    line-height: 25px;
    width: 12%;
	border-right:0 none;
	background: url("") repeat-y right top;
    background-image: url("");
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-position-x: 100%;
    background-position-y: 0%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}




.billCol0 {
    float: left;
    line-height: 25px;
    width: 100%;
}
.line1 {
	height: 25px;
	width: 100%;
	background: none repeat scroll 0 0 #FFFFFF;
	text-align:center;
}
.line1:hover {
	background-color:#F2F8F9;
}
.line2:hover {
	background-color:#F2F8F9;
}
.line2 {
	height: 25px;
	width: 100%;
	text-align:center;
}
.sort{cursor:pointer;}
.sort:hover{color:black;}

</style>
<div class="position"><a href='/default/index'>Home</a> &gt; <a href='/merchant/my-account'>Merchant Center</a>  &gt; Others &gt; Plan List </div>
<div class="merchant-content" style="border-bottom: 1px solid #CCCCCC;">
<H4>Current Plan</H4>

<div style="margin:5px;border-bottom: 1px solid #CCCCCC;">
<div>
  
 
<li>        
<span class="bold">Current Plan: </span>  <span>$<{$plan.total}> /month</span>
</li>
<li>
<span class="bold">Next Billing Date:</span>  <span><{$plan.billing_date}>&nbsp;&nbsp;<{$dateMonth}>  </span>
</li>
 
</div>	

									 
		 
<div class="bold">Usage in this Billing Cycle:</div>
<div>		
		<ul style="padding-left:30px">			
			<li style="list-style-type:disc;">Storage:<{$planUsage.pallet_used}>/<{$planUsage.pallet_qty}></li>
			<li style="list-style-type:disc;">SKUs:<{$planUsage.sku_used}>/<{$planUsage.sku_qty}></li>
			<li style="list-style-type:disc;">Plan items:<{$planUsage.item_used}>/<{$planUsage.item_qty}></li>

		</ul>
</div> 


<li>        
<span class="bold">Log View: </span>  <span> <img src="/images/icon_view.gif" title="Detail" onclick="OpenUsageDiv('+<{$planUsage.pu_id}>+')" style="cursor:pointer;" /></span>
</li>


<div id="billing-form" style="margin-top:50px;">
<form id="billing-detail" name="billing-detail" method="post" action="">
Date From:
<input class="billDateFrom" id="billDateFrom" name="billDateFrom" class="input-width-1" value="<{$startDate}>" type="text">
to
<input class="billDateTo" id="billDateTo" name="billDateTo" class="input-width-1"  value="<{$endDate}>" type="text">
<span class="button-2" onclick="inquire()">Inquire</span>

<p> 

</form>
</div>
<div style="margin-top:5px;">

<div class="tab-div row">
	<div class="row height25 row-header">  
		<div class="billCol1 cell sort" sortColumn="billing_date">Billing Date</div>
		<div class="billCol2 cell sort" sortColumn="expired">Expiry Date</div>
		<div class="billCol3 cell sort" sortColumn="item_qty">Plan Item</div>
		<div class="billCol4 cell sort" sortColumn="sku_qty">Plan SKU</div>
		<div class="billCol5 cell sort" sortColumn="pallet_qty">Plan pallet</div>
		<div class="billCol6 cell">Plan Fee</div>		
		<div class="billCol7 cell">Operation</div>
		 
	</div>                                
	<div class="billData">
	</div>
		
</div>	
<div class="pagination" style="padding-top:10px"></div>
</div>